.cellExtra {
    position: absolute;
    font-size: 10px;
    height: 100%;
    aspect-ratio: 1;

    .extra {
        position: absolute;
        width: 50%;
        height: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color);
    }


    &.topRight {
        top: 0;
        right: 0;
        background-image: linear-gradient(to bottom left, transparent calc(50% - 1px), var(--color), transparent calc(50% + 1px));

        .extra {
            top: 0;
            right: 0;
        }
    }

    &.bottomRight {
        bottom: 0;
        right: 0;
        background-image: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--color), transparent calc(50% + 1px));

        .extra {
            bottom: 0;
            right: 0;
        }
    }

    &.bottomLeft {
        bottom: 0;
        left: 0;
        background-image: linear-gradient(to bottom left, transparent calc(50% - 1px), var(--color), transparent calc(50% + 1px));

        .extra {
            bottom: 0;
            left: 0;
        }
    }

    &.topLeft {
        top: 0;
        left: 0;
        background-image: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--color), transparent calc(50% + 1px));

        .extra {
            top: 0;
            left: 0;
        }
    }
}